<template>
	<div id="img">
		<!-- 表情区域 -->
		<ul class="ul">
			<li v-for="(item,index) in faceList" :key="index" @touchend="getBrow(index)">{{item}}</li>
		</ul>
	</div>
</template>
<script>
import appData from './emojis.json'
export default {
	data () {
		return {
			faceList: [],
		}
	},
	methods:{
		//表情json生成表情
		faceContent:function(){
			this.faceShow = !this.faceShow;
			if (this.faceShow == true) {
				for (let i in appData) {
					this.faceList.push(appData[i].char);
				}
			}
			else {
			  	this.faceList = [];
			}
		},
		//点的是哪个表情
		getBrow:function(index){
			this.$emit("selectEmo",this.faceList[index]); //把表情传递给父级
		}
	},
	created:function(){
		this.faceContent();
	}
}
</script>

<style lang="scss" scoped>
	.ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		li {
			width: 10%;
			font-size: .4rem;
			list-style: none;
			text-align: center;
			padding: .04rem .038rem;
		}
	}
</style>
